<template>
  <div>
    <!-- {{ displayValues }} -->
    <CasOption
      :display-values="displayValues"
      v-for="(val, optIndex) in displayValues"
      :key="optIndex"
      :check-strictly="checkStrictly"
      :options="currentLevelOptions(val, optIndex)"
      :index="optIndex"
      :trigger="trigger"
      @on-select="onSelect"
      @on-change="onChange"
      @on-item-trigger="selectValue"
    /><CasOption
      :display-values="displayValues"
      :trigger="trigger"
      :check-strictly="checkStrictly"
      v-if="lastOption && lastOption.length > 0"
      :options="lastOption"
      @on-select="onSelect"
      @on-change="onChange"
      @on-item-trigger="selectLastValue"
    />
  </div>
</template>
<script>
import { defineComponent, watch } from 'vue'
import CasOption from './CasOption'

// export default defineComponent({
export default {
  components: {
    CasOption,
  },
  name: 'MulCaspanel',
  emits: ["on-change"],
  props: {
    options: {
      type: Array,
      default: () => [],
    },
    checkStrictly: {
      type: Boolean,
      default: true,
    },
    trigger: String,
  },
  data() {
    return {
      displayValues: [
        // 记录显示的值  选中状态在树里通过字段check来记录
        // 'jiangsu'
      ],
    }
  },
  /* setup(props) {
    watch(() => props.options, function() {
      console.log("optins change", props.options)
    });
  }, */
  computed: {
    currentLevelOptions() {
      return (v, i) => {
        // console.log("in current level options", this.displayValues, this.options);
        const disp = this.displayValues.reduce((ret, item, index) => {
          if (index >= i) {
            return ret
          }
          if (item === '') {
            return ret
          }
          const tag = ret.find((o) => o.value === item)
          if (tag && tag.children) {
            return tag.children || []
          }
          return []
        }, this.options || [])
        // console.log("current level options---", disp)
        return disp
      }
    },
    lastOption() {
      const a =  this.displayValues.reduce((ret, item, index) => {
        const tag = ret.find((o) => o.value === item)
        return (tag && tag.children) || []
      }, this.options || [])
      // console.log("displayValues", this.displayValues, "------lastOption: ", a)
      return a
    },
  },
  methods: {
    onSelect(item) {
      this.handleSelect(item, this.options)
    },
    handleSelect(item, options = []) {
      options.forEach((opt) => {
        opt.selected = opt.value === item.value
        if (opt.children) {
          this.handleSelect(item, opt.children)
        }
      })
    },
    selectValue({ value, index }) {
      const v = this.displayValues.reduce((r, v, i) => {
        if (i < index) {
          r.push(v)
        } else if (i === index) {
          r.push(value)
        }
        return r
      }, [])
      // console.log("select value", v)
      this.displayValues = v
    },
    selectLastValue({ value }) {
      // console.log("----")
      this.displayValues = [...this.displayValues, value]
    },
    onChange(data) {
      this.$emit('on-change', data)
    },
  },
}
</script>
